<!--
 * @Author: chentao 294446993@qq.com
 * @Date: 2023-01-03 14:19:20
 * @LastEditors: chentao 294446993@qq.com
 * @LastEditTime: 2023-01-30 18:20:05
 * @FilePath: \vue3-pc-app\src\components\chat\VueScrollList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <div @click="btnRefreshList" class="btn-refresh">刷新数据</div>
        <div v-for="(item, index) in dataList">
            <div><span>姓名:{{ item.name }}</span><span>年龄：{{ item.age }}</span></div>
        </div>

        <div v-for="(item,index) in groupMemberList">
            <div class="ui-friends-item" @contextmenu="rightClick($event, item)">
                <img class="icon" :src="item.img" alt="" height="20" width="20" style="border-radius: 50%" />
                <div class="name">
                    {{ item.nickname }}
                </div>
                <el-tag v-if="item.isLeader" type="info" size="small" class="ui-tag-info-sm">
                    群主
                </el-tag>
            </div>
        </div>
    </div>

</template>
<script>
import { defineComponent, computed, reactive, toRefs, ref } from 'vue'
import { useStore } from 'vuex'
import { handleMemberName } from '@/utils/chat'
export default defineComponent({
    components: {},
    setup() {
        const store = useStore();
        let gMemberList = reactive([]) //是一个代理对象Proxy [object Array]
        let dataList = reactive([])
        console.log("test_gMemberList", gMemberList)
        //传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象
        //官方文档 https://vue3js.cn/reactivity/computed.html
        const groupMemberList = computed(() => {
            return store.state.test.groupMemberList
        })
        console.log("groupMemberList", groupMemberList)
        console.log("取store里面的数组", store.state.test.groupMemberList)
        //模拟刷新数据列表
        const btnRefreshList = () => {
            const vuexArr = reactive(store.state.test.groupMemberList)
            ///const vuexArr2 = reactive(groupMemberList.value)
            console.log("数据类型", groupMemberList)
            // for (let i = 0; i < store.state.test.groupMemberList.length; i++) {
            //     gMemberList.push(store.state.test.groupMemberList[i])
            // }
            // gMemberList.push(...vuexArr)
            gMemberList.push(...store.state.test.groupMemberList)
            //gMemberList.push(...vuexArr2)
            //console.log("数组拼接0", gMemberList)
            const numberList = [
                {
                    name: 'name1',
                    age: 33
                },
                {
                    name: 'name2',
                    age: 34
                }
            ]
            dataList.push(...numberList)
            //console.log("dataList", dataList)
        }
        const rightClick = () => { }
        return {
            groupMemberList: store.state.test.groupMemberList,
            dataList,
            rightClick,
            btnRefreshList
        }
    }
})
</script>
<style lang="less" scoped>
.btn-refresh {
    cursor: pointer;
}

.ui-friends-item {
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;

    .icon {}

    .name {
        width: 70px;
        margin-left: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #303133 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .icon-del {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translate(0, -50%);
    }

    .ui-tag-info-sm {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translate(0, -50%);
    }
}

// 鼠标放在上面触发元素样式改变
.ui-friends-item:hover {
    background-color: #eee;
}
</style>